<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// 使用自定义封装的 myaxios
import { get, post } from '@/myaxios'

// 显示动态内容详情
const showNotice = (notice) => {
    ElMessageBox({
        title: '评论内容',
        message: notice
    })
}

/**删除评论 */
const deleteComment = async (currentRow) => {
    ElMessageBox.confirm(
        `确定要删除 此条评论 数据么`,
        '注意',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(async () => {
            const resp = await post("customerOrderComment/delete", { commentId: currentRow.commentId })
            if (resp.data.code === 2010) {
                ElMessage.success(resp.data.msg)
            } else {
                ElMessage.error(resp.data.msg)
            }

            queryData(queryForm)

        })
        .catch(() => {
            console.log("取消删除")
        })
}

/**评论修改状态 */
const changeCommentSwitch = (row) => {
    ElMessageBox.confirm(
        `确认修改评论状态为[ ${row.commentStatus == 1 ? '正常' : '禁止'} ]`,
        '注意',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            let params = { commentId: row.commentId, commentStatus: row.commentStatus }
            operationData("customerOrderComment/editCommentStatus", params)
        })
        .catch(() => {
            console.log('cancel')
            row.commentStatus = row.commentStatus == 1 ? 0 : 1
        })
}

/**
 * 条件查询
 */
const queryForm = reactive({
    gameName: "", // 游戏名称
    commentDatetime: "", // 评论日期
    orderPaymentCustomerName: "", // 下单用户
    orderServeCustomerName: "", // 接单用户
})

const onSubmit = (sortsituation) => {
    if (typeof sortsituation === "string") {
        queryForm.sort = sortsituation
    }
    queryData(queryForm)
}
const onReset = () => {
    queryFormRef.value.resetFields()
    queryForm.sort = 'asc'
    queryData({})
}

// pid下拉列表使用的动态数据
const optionsList = reactive({ optionsData: [] })

// 获得查询表单组件对象
const queryFormRef = ref()

/**
 * 分页组件
 */
const pageInfo = reactive({
    pageData: {
        page: 1,
        pageSize: 10,
        total: 77
    }
})

// 页码改变
const handleCurrentChange = (val) => {
    pageInfo.pageData.page = val
    let paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

// 每页显示记录改变
const handleSizeChange = (val) => {
    pageInfo.pageData.page = 1
    pageInfo.pageData.pageSize = val
    let paramsObj = { ...pageInfo.pageData, ...queryForm }
    queryData(paramsObj)
}

// table列表数据
const tableList = reactive({ tableData: [] })

/**
 * 公共函数
 */
const queryData = (params) => {
    get("customerOrderComment/queryAll", params)
        .then((resp) => {
            if (resp.data.code === 2000) {
                tableList.tableData = resp.data.returnData
                pageInfo.pageData = resp.data.pageInfo
            } else if (resp.data.code === 2001) {
                tableList.tableData = []
                pageInfo.pageData = { page: 1, pageSize: 10, total: 0 }
            }
        })
}

const querySelect = () => {
    get("/games/query", { page: 1, pageSize: 1000 })
        .then((resp) => {
            if (resp.data.code === 2000) {
                optionsList.optionsData = resp.data.returnData
            }
        })
}

const operationData = async (url, params) => {
    post(url, params)
        .then((resp) => {
            if (resp.data.code === 2010) {
                ElMessage.success(resp.data.msg)
            } else if (resp.data.code === 2011) {
                ElMessage.error(resp.data.msg)
            }
            let paramsObj = { ...pageInfo.pageData, ...queryForm }
            queryData(paramsObj)
        })
}

onMounted(() => {
    queryData({})
    querySelect()
})
</script>

<template>
    <el-form ref="queryFormRef" :inline="true" :model="queryForm">
        <el-form-item label="游戏名称" prop="gameName">
            <!-- <el-input v-model="queryForm.gameName" placeholder="gameName" /> -->
            <el-select style="width: 220px;" v-model="queryForm.gameName" placeholder="选择游戏">
                <el-option v-for="options in optionsList.optionsData" :label="options.gameName"
                    :value="options.gameName" />
            </el-select>
        </el-form-item>
        <el-form-item label="下单日期" prop="commentDatetime">
            <el-date-picker v-model="queryForm.commentDatetime" type="date" placeholder="选择日期"
                value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="下单用户" prop="orderPaymentCustomerName">
            <el-input v-model="queryForm.orderPaymentCustomerName" placeholder="下单客户名" />
        </el-form-item>
        <el-form-item label="接单用户" prop="orderServeCustomerName">
            <el-input v-model="queryForm.orderServeCustomerName" placeholder="接单客户名" />
        </el-form-item>

        <el-form-item>
            <el-button type="primary" plain @click="onSubmit">查询</el-button>
            <el-button type="primary" plain @click="onReset">重置</el-button>

            <el-button-group style="margin-left: 20px;">
                <el-button plain @click="onSubmit('asc')">
                    评分升序<el-icon class="el-icon--right"><ArrowUpBold /></el-icon>
                </el-button>
                <el-button plain @click="onSubmit('desc')">
                    评分降序<el-icon class="el-icon--right"><ArrowDownBold /></el-icon>
                </el-button>
            </el-button-group>
        </el-form-item>
    </el-form>


    <el-table :data="tableList.tableData" height="600px" style="width: 100%">
        <el-table-column fixed prop="commentId" label="评论编号" width="80" />
        <el-table-column prop="gameName" label="所属游戏" width="180"></el-table-column>
        <el-table-column prop="orderPaymentCustomerName" label="下单用户" width="180"> </el-table-column>
        <el-table-column prop="orderServeCustomerName" label="接单用户" width="180"></el-table-column>
        <el-table-column prop="orderId" label="订单编号" width="80"></el-table-column>
        <el-table-column prop="commentDatetime" label="评论时间" width="180">
            <template #default="scope">
                <el-tag>{{ scope.row.commentDatetime }}</el-tag>
            </template>
        </el-table-column> 
        <el-table-column prop="commentScore" label="评论分数"  width="200">
            <template #default="scope">
                <el-rate v-model="scope.row.commentScore" disabled show-score text-color="#ff9900"
                    score-template="{value}分" />
            </template>
        </el-table-column>
        <el-table-column prop="commentDetail" label="评论详情" width="200">
            <template #default="scope">
                <el-link href="javascript:void(0)" type="primary" @click="showNotice(scope.row.commentDetail)">
                    <span v-if="scope.row.commentDetail.length>=8">{{scope.row.commentDetail.substr(0,8)}}...</span>
                    <span v-else>{{scope.row.commentDetail}}</span>
                </el-link>
            </template>
        </el-table-column>
        <el-table-column fixed="right" prop="commentStatus" label="评论状态">
            <template #default="scope">
                <!--  0屏蔽 1正常 -->
                <!-- <el-tag v-if="scope.row.commentStatus == 1" type="success">正常</el-tag>
          <el-tag v-if="scope.row.commentStatus == 0" type="info">屏蔽</el-tag> -->
                <el-switch v-model="scope.row.commentStatus" inline-prompt active-text="正常" inactive-text="屏蔽"
                    :active-value="1" :inactive-value="0"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                    @change="changeCommentSwitch(scope.row)" />
            </template>
        </el-table-column>

        <el-table-column  fixed="right" label="操作" width="100">
            <template #default="scope">
                <el-button type="primary" plain @click="deleteComment(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination v-model:current-page="pageInfo.pageData.page" v-model:page-size="pageInfo.pageData.pageSize"
        :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.pageData.total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />

</template>

<style scoped></style>